<template>
	<!-- v-if="productList.length > 0" -->
	<div  style="margin-top:2px;background:white;padding:0 30rpx">
		<div class="title acea-row row-between-wrapper" style="padding: 10px 0;">
			<div class="text">
				<div class="name line1">{{title}}</div>
			</div>
			<!-- 精品 -->
			<div v-if="type==1" @click="toPage('/pages/shop/GoodsList/index',{type:1})"
				class="more">
				更多
				<span class="iconfont icon-jiantou"></span>
			</div>
			<!-- 新品 -->
			<div v-if="type==2" @click="toPage('/pages/shop/GoodsList/index',{type:3})"
				class="more">
				更多
				<span class="iconfont icon-jiantou"></span>
			</div>
			<!-- 热卖 -->
			<div v-if="type==3" @click="toPage('/pages/shop/GoodsList/index',{type:2})"
				class="more">
				更多
				<span class="iconfont icon-jiantou"></span>
			</div>
			<!-- 优惠 -->
			<div v-if="type==4" @click="toPage('/pages/shop/GoodsPromotion/index')" class="more">
				更多
				<span class="iconfont icon-jiantou"></span>
			</div>
		</div>
		<div :style="{backgroundColor: config.backgroundColor}">
			<div v-if="config.columns == 1">
				<div class="groupBox" v-for="(item,index) in productList" :key="index"
					@click="toPage('/pages/shop/GoodsCon/index',{id:item.id})">
					<div class="groupShop flex">
						<div class="groupShop-img">
							<image :src="item.image" mode="widthFix" />
						</div>
						<div class="groupShop-detail">
							<div class="title">{{item.storeName}}</div>
							<div class="text" v-if="item.storeInfo">{{item.storeInfo}}</div>
							<div class="sale">已售{{item.sales + item.ficti}}{{ item.unitName }}</div>
							<div class="price colorRed font16">
								￥{{item.price}}
								<span class="origi font13">￥{{item.otPrice}}</span>
							</div>
							<div class="btn">
								<image
									src="http://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/index-design/buy.png" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div v-else>
				<van-row v-for="(row, i) in rows" :key="i">
					<van-col 
					:span="colSpan" 
					v-for="(item, j) in row" 
					:key="j" 
					style="padding:0!important"
					>
						<div 
						class="detail-box" 
						style="background:#ffffff;display: flex;flex-direction: column;"
						@click="toPage('/pages/shop/GoodsCon/index',{id:item.id})"
						>
							<image :src="item.image" mode="widthFix" />
							<div class="product-name-box" style="padding-left:3px;">{{item.storeName}}</div>
							<div class="product-price1-box" style="padding-bottom:6px;padding-left:3px;">
								<span style="font-weight: bold">￥{{item.price}}</span>
								<span class="product-price2-box">￥{{item.otPrice}}</span>
							</div>
						</div>
					</van-col>
				</van-row>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getProductList
	} from "@/api/public";
	export default {
		name: "product-list",
		
		props: {
			config: {
				type: Object,
				required: true
			}
		},
		
		data() {
			return {
				productList: [
					{id:1,storeName:'这是一个商品',storeInfo:'给我一杯忘情水',sales:100,ficti:10,unitName:'件',price:10,otPrice:8,image:'https://img2.baidu.com/it/u=2071736052,2398096525&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400'}
				],
				type: '1',
				title: '商品列表',
				rows: [
					[{id:1,storeName:'这是一个商品',storeInfo:'给我一杯忘情水',sales:100,ficti:10,unitName:'件',price:10,otPrice:8,image:'https://img2.baidu.com/it/u=2071736052,2398096525&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400'},{id:1,storeName:'这是一个商品',storeInfo:'给我一杯忘情水',sales:100,ficti:10,unitName:'件',price:10,otPrice:8,image:'https://img2.baidu.com/it/u=2071736052,2398096525&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=400'}]
				]
			};
		},
		
		mounted() {
			// console.log("this.config",this.config)
			this.getData()
		},

		methods: {
			// 跳转
			toPage(url,query={}){
				this.$router.push({
					path:url,
					query:query
				});
			},
			
			// 初始化
			getData() {
				let param = {
					type: this.config.type,
					limit: this.config.count
				}
				if (this.config.source == "auto") {} else {
					param = {
						ids: this.config.ids.join(',')
					}
				}
				getProductList(param).then(res => {
					if (res.status == 200) {
						this.productList = res.data;
						this.processRows()
					}
				})
				this.type = this.config.type;
				this.title = this.config.title;
			},
			
			
			processRows() {
				this.rows = [];
				if (this.productList.length == 0) {
					return;
				}
				for (let i = 0; i < this.rowCount; i++) {
					let start = i * this.config.columns,
						end = (i + 1) * this.config.columns
					let row = [];
					for (let j = start; j < end; j++) {
						if (this.productList[j]) {
							row.push(this.productList[j]);
						}
					}
					this.rows.push(row)
				}
			}
		},
		
		computed: {
			
			rowCount() {
				return Math.ceil(this.productList.length / this.config.columns);
			},
			
			colSpan() {
				return Math.floor(24 / this.config.columns);
			},
			
			boxStyle() {
				return {
					backgroundColor: this.config.backgroundColor
				};
			},
			
			imageWidth() {
				return this.config.columns == 2 ? 177 : 115;
			},
		}
	};
</script>

<style scoped>
	.more {
		font-size: 26rpx;
		color: #999999
	}

	.detail-box {
		position: relative;
	}

	.detail-box image {
		width: 98%;
		height: 175px !important;
		margin-left: 1%;
	}

	.product-name-box {
		width: 95%;
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		margin: 10px 0;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.product-price1-box {
		font-size: 36rpx;
		color: #ff563d;
		/* font-weight:bold; */
	}

	.product-price2-box {
		font-size: 26rpx;
		color: #999999;
		text-decoration: line-through;
		padding-left: 16rpx;
	}

	.product-image-box {
		background: url(http://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/index-design/image-bg.png) no-repeat;
	}

	.groupBox {
		background: rgb(246, 246, 246);
		height: 260rpx;
	}

	.groupBox .groupShop {
		/* margin-bottom: 6px; */
		background: #ffffff;
		padding: 0 3% 20rpx 3%;
		align-items: center;
		height: 240rpx;
	}

	.groupBox .groupShop .groupShop-img image {
		width: 120px;
		height: 240rpx !important;
	}

	.groupBox .groupShop .groupShop-detail {
		position: relative;
		width: 242px;
		padding-left: 16px;
	}

	.groupBox .groupShop .groupShop-detail .title {
		margin-bottom: 8px;
		width: 180px;
		font-weight: bold;
		color: #333333;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		word-break: break-all;
	}

	.groupBox .groupShop .groupShop-detail .text {
		width: 180px;
		font-size: 14px;
		color: #666666;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: 26px;
		margin-bottom: 12px;
	}

	.groupBox .groupShop .groupShop-detail .sale {
		width: 180px;
		font-size: 13px;
		color: #999999;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
		text-align: 26px;
		margin-bottom: 8px;
	}

	.groupBox .groupShop .groupShop-detail .pepoles {
		display: flex;
		align-items: center;
	}

	.groupBox .groupShop .groupShop-detail .origi {
		text-decoration: line-through;
		color: #999999;
		margin: 8px 0 4px 0;
	}

	.groupBox .groupShop .groupShop-detail .price {
		font-weight: bold;
	}

	.groupBox .groupShop .groupShop-detail .btn image {
		position: absolute;
		right: 8px;
		bottom: -4px;
		width: 56rpx;
		height: 56rpx;
	}

	.colorRed {
		color: #f85353;
	}

	.font16 {
		font-size: 16px;
	}

	.font14 {
		font-size: 14px;
	}

	.font13 {
		font-size: 13px;
	}

	.flex {
		display: flex;
	}
</style>
